import React, { useMemo } from "react";
import { useAppDispatch, useAppSelector } from "../../store/store";
import { ProductCard, Checkbox, Stepper, SubmitBar } from "react-vant";
import { CheckCart, CountCart, AllCar } from "../../store/CartSlice";
const Index: React.FC = () => {
  const dispatch = useAppDispatch();
  const { CartList } = useAppSelector((state) => state.cart);

  // 全选
  const checkAll = useMemo(() => {
    return CartList.every((item: any) => item.checked);
  }, [CartList]);
  return (
    <div>
      <div>
        {CartList.length > 0 &&
          CartList.map((item: any, ind: number) => {
            return (
              <div>
                <Checkbox
                  checked={item.checked}
                  onChange={() => dispatch(CheckCart(item))}
                ></Checkbox>
                <ProductCard
                  key={ind}
                  num={item.count}
                  price={item.body.price}
                  desc={item.body.desc}
                  title={item.body.name}
                  thumb={item.body.image}
                  footer={
                    <>
                      <Stepper
                        min={0}
                        value={item.count}
                        onChange={(v) =>
                          dispatch(CountCart({ ...item, count: v }))
                        }
                      />
                    </>
                  }
                />
              </div>
            );
          })}
      </div>
      <SubmitBar
        price="3050"
        buttonText="提交订单"
        style={{
          bottom: "50px",
        }}
        tip={
          <>
            你的收货地址不支持同城送,
            <span style={{ color: "#1989fa" }}>修改地址</span>
          </>
        }
      >
        <Checkbox
          checked={checkAll}
          onChange={() => dispatch(AllCar(!checkAll))}
        >
          全选
        </Checkbox>
      </SubmitBar>
    </div>
  );
};

export default Index;
